<template>
    <div>
        <div class="container">
            <div class="login-form">
                <h1 class="h1" style="color:#000;fontSize:28px;">医疗后勤管理系统注册</h1>
                <el-form class="rgs-form">
                    <el-form-item label="账号" class="input" v-if="tableName=='user'">
                        <el-input v-model="ruleForm.username" autocomplete="off" placeholder="账号"  />
                    </el-form-item>
                    <el-form-item label="账号" class="input" v-if="tableName=='leadership'">
                        <el-input v-model="ruleForm.name" autocomplete="off" placeholder="账号"  />
                    </el-form-item>
                    
                    <el-form-item label="密码" class="input">
                        <el-input type="password" v-model="ruleForm.password" autocomplete="off" show-password/>
                    </el-form-item>
                    <el-form-item label="重复密码" class="input">
                        <el-input type="passwo   rd" v-model="ruleForm.passwordCopy" autocomplete="off" show-password/>
                    </el-form-item>
                        <el-form-item label="领导名称" class="input" v-if="tableName=='leadership'">
                            <el-input v-model="ruleForm.nick" autocomplete="off" placeholder="领导名称"  />
                        </el-form-item>
                        <el-form-item label="领导手机号" class="input" v-if="tableName=='leadership'">
                            <el-input v-model="ruleForm.phone" autocomplete="off" placeholder="领导手机号"  />
                        </el-form-item>
                        <el-form-item label="领导身份证号" class="input" v-if="tableName=='leadership'">
                            <el-input v-model="ruleForm.number" autocomplete="off" placeholder="领导身份证号"  />
                        </el-form-item>

                        <el-form-item label="领导邮箱" class="input" v-if="tableName=='leadership'">
                            <el-input v-model="ruleForm.email" autocomplete="off" placeholder="领导邮箱"  />
                        </el-form-item>

                        <el-form-item label="后勤员名称" class="input" v-if="tableName=='user'">
                            <el-input v-model="ruleForm.nick" autocomplete="off" placeholder="后勤员名称"  />
                        </el-form-item>
                        <el-form-item label="后勤员手机号" class="input" v-if="tableName=='user'">
                            <el-input v-model="ruleForm.phone" autocomplete="off" placeholder="后勤员手机号"  />
                        </el-form-item>
                        <el-form-item label="后勤员身份证号" class="input" v-if="tableName=='user'">
                            <el-input v-model="ruleForm.number" autocomplete="off" placeholder="后勤员身份证号"  />
                        </el-form-item>

                        <el-form-item label="后勤员邮箱" class="input" v-if="tableName=='user'">
                            <el-input v-model="ruleForm.email" autocomplete="off" placeholder="后勤员邮箱"  />
                        </el-form-item>

                    <div style="display: flex;flex-wrap: wrap;width: 100%;justify-content: center;">
                        <el-button class="btn" type="primary" @click="login()">注册</el-button>
                        <el-button class="btn close" type="primary" @click="close()">取消</el-button>
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                ruleForm: {
                },
                tableName:"",
                rules: {},
                sexTypesOptions : [],
                leadershipPhotoFlag:false,//用于刷新文件上传
                yonghuPhotoFlag:false,//用于刷新文件上传
            };
        },
        mounted(){
            let table = this.$storage.get("loginTable");
            this.tableName = table;

            //级联表的下拉框查询

        },
        methods: {
            // 获取uuid
            getUUID () {
                return new Date().getTime();
            },
            leadershipPhotoUploadChange(fileUrls) {
               this.ruleForm.leadershipPhoto = fileUrls;
                if(this.leadershipPhotoFlag){
                    this.leadershipPhotoFlag=false;
                }else{
                    this.leadershipPhotoFlag=true;
                }
            },
            yonghuPhotoUploadChange(fileUrls) {
               this.ruleForm.yonghuPhoto = fileUrls;
                if(this.yonghuPhotoFlag){
                    this.yonghuPhotoFlag=false;
                }else{
                    this.yonghuPhotoFlag=true;
                }
            },
            close(){
                this.$router.push({ path: "/login" });
            },
            // 注册
            login() {

                            if((!this.ruleForm.username)&& 'user'==this.tableName){
                                this.$message.error('账号不能为空');
                                return
                            }
                            if((!this.ruleForm.name)&& 'leadership'==this.tableName){
                                this.$message.error('账号不能为空');
                                return
                            }
                            if((!this.ruleForm.password)){
                                this.$message.error('密码不能为空');
                                return
                            }
                            if((!this.ruleForm.passwordCopy)){
                                this.$message.error('重复密码不能为空');
                                return
                            }
                            if(this.ruleForm.passwordCopy != this.ruleForm.password){
                                this.$message.error('密码和重复密码不一致');
                                return
                            }
                            if((!this.ruleForm.nick)&& 'leadership'==this.tableName){
                                this.$message.error('领导名称不能为空');
                                return
                            }
                             if('leadership' == this.tableName && this.ruleForm.phone&&(!this.$validate.isMobile(this.ruleForm.phone))){
                                 this.$message.error('手机应输入手机格式');
                                 return
                             }
                            if((!this.ruleForm.number)&& 'leadership'==this.tableName){
                                this.$message.error('领导身份证号不能为空');
                                return
                            }

                            if('leadership' == this.tableName && this.ruleForm.email&&(!this.$validate.isEmail(this.ruleForm.email))){
                                this.$message.error("邮箱应输入邮件格式");
                                return
                            }

                            if((!this.ruleForm.nick)&& 'user'==this.tableName){
                                this.$message.error('后勤员名称不能为空');
                                return
                            }
                             if('user' == this.tableName && this.ruleForm.phone&&(!this.$validate.isMobile(this.ruleForm.phone))){
                                 this.$message.error('手机应输入手机格式');
                                 return
                             }
                            if((!this.ruleForm.number)&& 'user'==this.tableName){
                                this.$message.error('后勤员身份证号不能为空');
                                return
                            }
                            if('user' == this.tableName && this.ruleForm.email&&(!this.$validate.isEmail(this.ruleForm.email))){
                                this.$message.error("邮箱应输入邮件格式");
                                return
                            }
                this.$http({
                    url: `${this.tableName}/${this.tableName}/save_${this.tableName}`,
                    method: "post",
                    data:this.ruleForm
                }).then(({ data }) => {
                    console.log(data)
                    if (data && data.code === 200) {
                    this.$message({
                        message: "注册成功,请登录后在个人中心页面补充个人数据",
                        type: "success",
                        duration: 1500,
                        onClose: () => {
                        this.$router.replace({ path: "/login" });
                }
                });
                } else {
                    this.$message.error(data.message);
                }
            });
            }
        }
    };
</script>
<style lang="scss" scoped>
	.el-radio__input.is-checked .el-radio__inner {
		border-color: #00c292;
		background: #00c292;
	}

	.el-radio__input.is-checked .el-radio__inner {
		border-color: #00c292;
		background: #00c292;
	}

	.el-radio__input.is-checked .el-radio__inner {
		border-color: #00c292;
		background: #00c292;
	}

	.el-radio__input.is-checked+.el-radio__label {
		color: #00c292;
	}

	.el-radio__input.is-checked+.el-radio__label {
		color: #00c292;
	}

	.el-radio__input.is-checked+.el-radio__label {
		color: #00c292;
	}

	.h1 {
		margin-top: 10px;
	}

	body {
		padding: 0;
		margin: 0;
	}

	.nk-navigation {
		margin-top: 15px;

		a {
			display: inline-block;
			color: #fff;
			background: rgba(255, 255, 255, .2);
			width: 100px;
			height: 50px;
			border-radius: 30px;
			text-align: center;
			display: flex;
			align-items: center;
			margin: 0 auto;
			justify-content: center;
			padding: 0 20px;
		}

		.icon {
			margin-left: 10px;
			width: 30px;
			height: 30px;
		}
	}

	.register-container {
		margin-top: 10px;

		a {
			display: inline-block;
			color: #fff;
			max-width: 500px;
			height: 50px;
			border-radius: 30px;
			text-align: center;
			display: flex;
			align-items: center;
			margin: 0 auto;
			justify-content: center;
			padding: 0 20px;

			div {
				margin-left: 10px;
			}
		}
	}

	.container {
		height: 100vh;
		background-position: center center;
		background-size: cover;
		background-repeat: no-repeat;
		background-image: url('/src/assets/img/back-img-bg.jpg');

		.login-form {
			right: 50%;
			top: 50%;
			transform: translate3d(50%, -50%, 0);
			border-radius: 10px;
			background-color: rgba(255,255,255,.5);
			font-size: 14px;
			font-weight: 500;
      box-sizing: border-box;

			width: 530px;
			height: auto;
			padding: 15px;
			margin: 0;
			border-radius: 5px;
			border-width: 5px;
			border-style: solid;
			border-color: var(--publicMainColor);
			background-color: rgba(255, 255, 255, 0.8);
			box-shadow: 0 0 0px 10px rgba(255, 255, 255, 0.8);

			.h1 {
				width: 500px;
				height: 40px;
				line-height:40px;
				color: #000;
				font-size: 23px;
				padding: 0;
				margin: 0px 0px 20px 0px;
				border-radius: 0;
				border-width: 0;
				border-style: solid;
				border-color: rgba(255,0,0,0);
				background-color: rgba(0, 206, 209, 0);
				box-shadow: 0 0 6px rgba(255,0,0,0);
				text-align: center;
			}

			.rgs-form {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

        .el-form-item {
          width: 100%;
          display: flex;

          & /deep/ .el-form-item__content {
            flex: 1;
            display: flex;
          }
        }

				.input {
          width: 450px;
          height:auto;
          padding: 0;
          margin: 0px 0px 10px 30px;
          border-radius: 0;
          border-width: 0;
          border-style: solid;
          border-color: rgba(255,0,0,0);
          background-color: rgba(30, 144, 255, 0);
          box-shadow: 0 0 6px rgba(255,0,0,0);

					& /deep/ .el-form-item__label {
            width: 120px;
            line-height:44px;
            color: rgba(3, 9, 23, 1);
            font-size: 18px;
            padding: 0;
            margin: 0px 10px 0px 0px;
            border-radius: 0;
            border-width: 0;
            border-style: solid;
            border-color: rgba(255,0,0,0);
            background-color: rgba(144, 238, 144, 0);
            box-shadow: 0 0 6px rgba(255,0,0,0);
					}

					& /deep/ .el-input__inner {
            width: 250px;
            height: 44px;
            line-height:44px;
            color: rgba(0, 0, 0, 1);
            font-size: 14px;
            padding: 0 12px;
            margin: 0px 0px 0px 0px;
            border-radius: 5px;
            border-width: 1px;
            border-style: solid;
            border-color: rgba(96, 98, 102, 1);
            background-color: var(--publicMainColor);
            box-shadow: 0 0 6px rgba(255,0,0,0);
            text-align: left;
					}
				}

        .send-code {
          & /deep/ .el-input__inner {
            width: 170px;
            height: 44px;
            line-height:44px;
            color: rgba(0, 1, 2, 1);
            font-size: 14px;
            padding: 0 12px;
            margin: 0;
            border-radius: 5px 0px 0px 5px;
            border-width: 1px;
            border-style: solid;
            border-color: #606266;
            background-color: var(--publicMainColor);
            box-shadow: 0 0 6px rgba(255,0,0,0);
            text-align: left;
          }

          .register-code {
            margin: 0;
            padding: 0;
            width: 80px;
            height: 44px;
            line-height:44px;
            color: rgba(0, 0, 0, 1);
            font-size: 14px;
            border-width: 0;
            border-style: solid;
            border-color: rgba(255,0,0,0);
            border-radius: 0 5px 5px 0;
            background-color: rgba(255, 215, 0, 0.6);
            box-shadow: 0 0 6px rgba(255,0,0,0);
          }
        }

				.btn {
					margin: 0px 10px 0px 20px;
          padding: 0;
					width: 88px;
					height: 44px;
          line-height:44px;
					color: #fff;
					font-size: 14px;
					border-width: 0;
					border-style: solid;
					border-color: #409EFF;
					border-radius: 5px;
					background-color: var(--publicMainColor);
          box-shadow: 0 0 6px rgba(255,0,0,0);
				}

				.close {
          margin: 0 10px;
          padding: 0;
          width: 88px;
          height: 44px;
          line-height:44px;
          color: rgba(255, 255, 255, 1);
          font-size: 14px;
          border-width: 0;
          border-style: solid;
          border-color: #409EFF;
          border-radius: 4px;
          background-color: var(--publicMainColor);
          box-shadow: 0 0 6px rgba(255,0,0,0);
				}

			}
		}
	}
</style>


